import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:ball_lion/utils/widget_utils.dart';
import 'package:ball_lion/widgets/base/wqs_image.dart';
import 'package:ball_lion/entity/other/resource_entity.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class NewsButtonArea extends StatefulWidget {
  const NewsButtonArea(
      {super.key, required this.menus, this.tapType, this.imageSize});

  final List<ResourceEntity> menus;
  final String? tapType;
  final double? imageSize;

  @override
  State<NewsButtonArea> createState() => _NewsButtonAreaState();
}

class _NewsButtonAreaState extends State<NewsButtonArea> {
  int _current = 0;

  set current(int value) => setState(() => _current = value);

  @override
  Widget build(BuildContext context) {
    List<List<ResourceEntity>> list = widget.menus.splitEvery(5);
    return Stack(
      children: [
        CarouselSlider(
            options: CarouselOptions(
              scrollPhysics: const ClampingScrollPhysics(),
              height: 95,
              viewportFraction: 1,
              enableInfiniteScroll: list.length > 1 ? true : false,
              autoPlay: false,
              onPageChanged: (index, reason) => current = index,
            ),
            items: list
                .map<Widget>((e) => Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          ...List.generate(
                              e.length,
                              (index) => item(e[index]).tap(() {
                                    if (widget.tapType.hasValue) {
                                      Utils.onEvent(widget.tapType!, params: {
                                        widget.tapType!: e[index].title
                                      });
                                    }
                                    e[index].doJump();
                                  })),
                          if (e.length < 4)
                            ...List.generate(
                                4 - e.length, (index) => item(ResourceEntity()))
                        ],
                      ),
                    ))
                .toList()),
        if (list.length > 1)
          Positioned(
              bottom: 4,
              right: 16,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: List<Widget>.generate(
                    list.length,
                    (index) => AnimatedContainer(
                        duration: const Duration(milliseconds: 100),
                        width: _current == index ? 8 : 3,
                        height: 3,
                        margin: const EdgeInsets.symmetric(horizontal: 4),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(1.5),
                            color: _current == index
                                ? Colours.main
                                : Colours.greyCC))),
              ))
      ],
    );
  }

  Widget item(ResourceEntity? entity) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Stack(
            clipBehavior: Clip.none,
            children: [
              QsImage(
                  imageUrl: entity?.imgUrl,
                  width: widget.imageSize ?? 50,
                  height: widget.imageSize ?? 50,
                  shimmer: false),
              if (entity?.extInfo.hasValue ?? false)
                Positioned(
                    top: -7, right: -4, child: tag(entity?.extInfo ?? ""))
            ],
          ),
          const SizedBox(height: 4),
          SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: const Size(60, 12 * 1.4),
              child: QsText(entity?.title,
                  fontSize: 12, fontWeight: FontWeight.w500, shimmer: false))
        ],
      );

  Widget tag(String text) {
    return Container(
        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Color(0xFFE02D78), Colours.main],
            ),
            border: Border.all(color: Colours.white, width: 1),
            borderRadius: BorderRadius.circular(13),
            color: Colours.main),
        child: QsText(
          text,
          color: Colours.white,
          fontSize: 9,
          fontWeight: FontWeight.w500,
          // needCenter: true
        ));
  }
}
